<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>志同道合~~合同问题不用慌</title>

    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/animation.js"></script>
    <script src="./js/focus.js"></script>


</head>

<body>
    <!-- header头部 -->
    <div class="header">
        <div class="w">
            <div class="left">
                <img src="./images/ztdh.jpg" alt="">
            </div>

            <input type="search" name="" id="" placeholder="请输入">
            <div class="fdj">
                <img src="./images/放大镜.png" alt="">
            </div>
            <button>搜索</button>


            <section>登录 注册</section>


            <div class="right">
                <ul class="nav">
                    <li>
                        <a href="#">合同审查</a>

                    </li>
                    <li>
                        <a href="#">法律咨询</a>
                        <ul>
                            <li>法律课堂</li>
                            <li>法律干货</li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">社区答疑</a>
                    </li>
                    <li>
                        <a href="#">客户案例</a>
                    </li>
                    <li>
                        <a href="#">就业指导</a>
                        <ul>
                            <li>公益活动</li>
                            <li>企业招聘</li>
                            <li>政策解说</li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">关于我们</a>
                        <ul>
                            <li>平台介绍</li>
                            <li>核心理念</li>
                            <li>项目合作</li>
                        </ul>
                    </li>
                </ul>
            </div>




        </div>
    </div>

    <!-- 轮播图 -->
    <div class="focus">
        <ul>
            <li>
                <img src="./images/1.jpg" alt="">
            </li>
            <li>
                <img src="./images/2.jpg" alt="">
            </li>

        </ul>
        <ol></ol>
        <span class="l">⇐</span>
        <span class="r">⇒</span>
    </div>


    <!-- ... -->
    <div class="w">
        <div class="navv">
            <div class="box">
                <img src="./images/合同审查盖章申请流程（制造交付）.png" alt="">
                <span>合同审查</span>
            </div>
            <div class="box">
                <img src="./images/专家线上答疑.png" alt="">
                <span>社区答疑</span>
            </div>
            <div class="box">
                <img src="./images/课堂.png" alt="">
                <span>法律课堂</span>
            </div>
        </div>
    </div>

    <!-- 固定电梯导航 start -->
    <div class="fixedtool">
        <ul>
            <li>在线客服</li>
            <li>咨询服务</li>
            <li>反馈</li>
        </ul>
    </div>
    <!-- 固定电梯导航 end -->

    <!-- 底部模块制作 start -->
    <footer class="footer">
        <div class="w">
            <div class="mod_service">
                <ul>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>志同道合</h4>
                            <p>你身边的合同保障</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>志同道合</h4>
                            <p>你身边的合同保障</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>志同道合</h4>
                            <p>你身边的合同保障</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>志同道合</h4>
                            <p>你身边的合同保障</p>
                        </div>
                    </li>

                </ul>
            </div>
            <div class="mod_help">
                <dl>
                    <dt>合同审查</dt>
                </dl>
                <dl>
                    <dt>法律咨询</dt>
                    <dd><a href="#">法律课堂</a></dd>
                    <dd><a href="#">法律干货</a></dd>
                </dl>
                <dl>
                    <dt>社区答疑</dt>
                </dl>
                <dl>
                    <dt>就业指导</dt>
                    <dd><a href="#">公益活动</a></dd>
                    <dd><a href="#">企业招聘</a></dd>
                    <dd><a href="#">政策解说</a></dd>
                </dl>
                <dl>
                    <dt>关于我们</dt>
                    <dd><a href="#">平台介绍</a></dd>
                    <dd><a href="#">核心理念</a></dd>
                    <dd><a href="#">项目合作</a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd>

                        志同道合客户端
                    </dd>
                </dl>
            </div>
            <div class="mod_copyright">
                <div class="link">
                    <a href="#">关于我们</a> |
                    <a href="#">联系我们</a> |
                    <a href="#">联系客服</a> |
                    <a href="#">商家合作</a> |
                    <a href="#">志同道合社区</a> |
                    <a href="#">志同道合公益</a> |
                    <a href="#">English Site</a> |
                    <a href="#">Contact U</a>
                </div>
                <div class="copyright">
                    地址：广州工商学院 邮箱: 739957025qq.com <br>

                </div>
            </div>
        </div>
    </footer>
    <!-- 底部模块制作 end -->


    <!-- ...1111 -->

    <div class="login">
        <a href="javascript:;">
            <span class="close">关闭</span>
        </a>
        <div class="title">Welcome</div>
        <div class="aaa">
            <input type="text" name="" id="text"> <em>账号</em>
        </div>
        <div class="aaa">
            <input type="password" name="" id="password"> <em>密码</em>
        </div>
    </div>
    <div class="bg"></div>


    <script src="./js/flexible.js"></script>
    <script src="./js/index.js"></script>
    <script>
        var sec = document.querySelector('section');
        var login = document.querySelector('.login');
        var title = document.querySelector('.title');
        var close = document.querySelector('.close');
        var bg = document.querySelector('.bg');
        var left = document.querySelector('.left');
        // 点击
        sec.addEventListener('click', function () {
            login.style.display = 'block';
            bg.style.display = 'block';
        })
        // 关闭
        close.addEventListener('click', function () {
            login.style.display = 'none';
            bg.style.display = 'none';
            login.style.left = '50%';
            login.style.top = '50%';
            login.style.transform = 'translate(-50%, -50%)';
        })
        // 移动
        title.addEventListener('mousedown', function (e) {
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            console.log(e.clientX);
            console.log(login.offsetLeft);
            document.addEventListener('mousemove', move);
            function move(e) {
                login.style.left = e.pageX - x + 'px';
                login.style.top = e.pageY - y + 'px';
            }
            document.addEventListener('mouseup', function () {
                document.removeEventListener('mousemove', move);
            })
        })

        left.addEventListener('click', function () {
            location = './ztdh.html'
        })

    </script>
</body>

</html>